<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>penTool</title>
    <script type="module" src="demo.js"></script>
</head>
<style>
    canvas {
        /* margin-left: 200px; */
        margin-top: 10px;
        outline: none;
        border: 1px solid rgb(162, 102, 231);
    }
</style>
<body>
    <h3>Double click the shape to edit path </h3>
    <canvas id="canvas1" width="800" height="600"></canvas>
    <canvas id="canvas2" width="800" height="600"></canvas>
    <canvas id="canvas3" width="1600" height="600"></canvas>
    <canvas id="canvas4" width="1600" height="600"></canvas>

    <div style="margin-top: 20px;">Oh, let's have a try ! <button id="btn">EnablePen</button></div>
    <canvas id="canvas" width="1600" height="600"></canvas>
</body>
</html>

<script>
    // let pen = new Pen("canvas");
    // document.getElementById("btn").addEventListener("click", event => {
    //     pen.enablePen();
    // })
</script>
